import React from 'react';
import { Breadcrumb, Button, Row, Col } from 'antd';
import { connect } from 'react-redux';
import { changeTabNav } from '@/store/reducers/common/action';
import { Control } from 'react-keeper'

const mapStateToProps = (state, ownProps) => ({
	activeKey: state.common.activeKey,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
	changeTabNav: key => dispatch(changeTabNav(key)),
})

class CustomBreadcrumb extends React.Component {

	handleClick = () => {
		this.props.changeTabNav('/');
	}

	handleRefresh = () => {
		console.log(this.props.activeKey, '刷新');
		Control.replace(this.props.activeKey, {a: 1});
	}

	render() {
		return (
			<Row>
				<Col span={20}>
					<Breadcrumb style={{ margin: '12px 16px' }}>
						<Breadcrumb.Item onClick={this.handleClick}><a>首页</a></Breadcrumb.Item>
						<Breadcrumb.Item>会员管理</Breadcrumb.Item>
						<Breadcrumb.Item>会员列表</Breadcrumb.Item>
					</Breadcrumb>
				</Col>
				<Col span={4}>
					<Button className='fr' onClick={this.handleRefresh} style={{marginRight: 16}} type="primary" icon='sync' >刷新</Button>
				</Col>
			</Row>
		);
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(CustomBreadcrumb)